---
name: docs
description: Site wide thumbnail template for the Directus docs
default_props:
  title: Page title goes here
  breadcrumb:
    - First level
    - Second level
  lastUpdated: 'December 16, 2021'
  readTime: 12 min read
width: 1200
height: 630
---
<html>
  <head>
    <!-- Font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
  </head>
  <body>

    <!-- Template -->
    <div class="container">

      <img class="logo" src="https://docs.directus.io/logo-dark.svg" />

      <p class="breadcrumb">
        {{#breadcrumb}}
          <span>{{.}}</span>
        {{/breadcrumb}}
      </p>

      <h1 class="title">
        {{title}}
      </h1>

      <p class="bottom-text">
        <span>{{readTime}}</span>
        <br />
        <em>Last updated: {{lastUpdated}}</span>
      </p>

      <img class="right-image" src="https://docs.directus.io/dashboard-image.svg" />

    </div>

    <!-- Styling -->
    <style>
      *, *::before, *::after {
        box-sizing: border-box;
      }
      html, body, .container {
        width: 100%;
        height: 100%;
        margin: 0;
      }
      body {
        font-family: 'Inter', sans-serif;
        background-color: #ffffff;
        color: #172940;
        overflow: hidden;
      }
      .container {
        position: relative;
        padding: 3.75rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }
      .container::before {
        content: '';
        position: absolute;
        top: -25%;
        right: -25%;
        bottom: -25%;
        left: 70%;
        transform: rotate(-10deg);
        background-color: #FF97DC;
      }
      .breadcrumb {
        margin: auto 0 1rem 0;
        font-size: 1.8rem;
        font-weight: 600;
        max-width: 60%;
        height: 1em;
        color: #745EFF;
      }
      .breadcrumb span {
        white-space: nowrap;
      }
      .breadcrumb span:not(:last-child)::after {
        content: " -> "
      }
      .title {
        margin: 0 0 auto 0;
        max-width: 62%;
        font-weight: 900;
        font-size: 4.125rem;
        letter-spacing: -1.5px;
        line-height: 1.2;
        hyphens: auto;

        /*
          Limit to 3 lines
          (this will add a "..." if title is too long)
        */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .bottom-text {
        margin: 0;
        color: #A2B5CD;
      }
      .bottom-text span {
        font-weight: 700;
        font-size: 1.75rem;
      }
      .bottom-text em {
        font-weight: 500;
        font-size: 1.5rem;
      }
      .right-image {
        position: absolute;
        top: 3rem;
        right: 0;
      }
    </style>
  </body>
</html>
